<template>
    <div class="modal fade" id="addDistributeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title" id="myModalLabel"> 指定分销商</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
          	 		<div class="form-group">
	                  <label class="col-md-4 col-sm-2 control-label"><span class="required">*</span>分销商：</label>
						<div class="col-md-8 col-sm-10">
							<select multiple="multiple" id="distribute" style="width: 260px; height: 34px;">
								<option v-for="(row,index) in selectList" :value="row.agentCompanyId" :key="index">{{row.agentCompanyName}}</option>
							</select>
						</div>
	                </div>
	            </div>
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="saveDistribute">确定</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<style>
@import url('../../assets/css/multiple-select.css');
</style>

<script>
	import swiper from '../../assets/js/multiple-select.js'
	export default{
		//接收父组件的绑定值
		props: ["distributeModal"],
		data() {
			return {
				//机构信息对象
				btnShow: true,
				selectList: []
			}
		},
		watch: {
			distributeModal: {
				handler: function(val, oldVal){
					if(val){
						this.initDistribute();
					}
				},
				//深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
				deep: true
			}
		},
		methods: {
			//初始化分销商列表
			initDistribute(){
				var _self = this;
				var body={};
				body.params = {
					premisesId: this.distributeModal.premisesId,
				};
				var url = this.utilHelper.apiUrl+'/api/getAgentOrgByPremises';
				_self.$http.post(url,body).then((response)=>{
					var resData = response.body ;
					if(resData.result != "1"){
                		layer.msg("查询失败");
                		return false;
                	}
					_self.selectList = resData.resData.agentOrgList;
					var selectedList = [];
					$.each(resData.resData.agentOrgList, function(){
		        		if(this.status=="1"){
		        			selectedList.push(this.agentCompanyId);
		        		} 
					});
					_self.$nextTick(() => {
						_self.initMultiple();
						$("#distribute").multipleSelect("setSelects", selectedList);
					});
				},(response)=>{
					layer.msg("查询失败");
				});
			},
			//初始化多选下拉框
			initMultiple(){
				$("#distribute").multipleSelect({
					filter: true,
					selectAllText: "全选"
				});
			},
			//保存指定的分销商
			saveDistribute() {
				var _self = this;
				var agentCompanyIds = $("#distribute").multipleSelect("getSelects");
				if(!agentCompanyIds || agentCompanyIds.length == 0){
					layer.alert("未指定任何分销商，所有分销商无法对楼盘进行报备，是否确认保存？",function(){
						_self.save();
					});
				}else{
					_self.save();
				}
			},
			save(){
				var _self = this;
				var agentCompanyIds = $("#distribute").multipleSelect("getSelects");
				var body={};
				body.params = {
					premisesIds: [_self.distributeModal.premisesId],
					agentCompanyIds: agentCompanyIds
				};
				console.log(body.params);
				var url = _self.utilHelper.apiUrl+'/api/assignPremisesAgent';
				_self.$http.post(url,body).then((response)=>{
					var resData = response.body ;
					if(resData.result == "1"){
                		layer.msg("保存成功");
                		$('#addDistributeModal').modal('hide');
						//子组件向父组件传递信号: 调用父组件中对子组件的监听
						_self.$emit('saveAuditListener');
                	}else{
                		layer.msg("保存失败");
                	}
				},(response)=>{
					layer.msg("保存失败");
				});
			}
		}
	}
	
</script>